<template>
	<van-sticky>
		<van-nav-bar title="店铺收益" left-text="返回" left-arrow @click-left="onClickLeft" fixed placeholder
			safe-area-inset-top />
        <div class="searchBox">
		    <div class="condition">
				<van-field v-model="params.startTime" readonly name="datePicker" placeholder="请选择开始时间"
					@click="timekai('startTime')" style="width:40% ;cursor: pointer;" input-align="center" />
				<van-field v-model="params.endTime" readonly name="datePicker" placeholder="请选择结束时间"
					@click="timekai('endTime')" style="width:40% ;cursor: pointer;" input-align="center" />
			</div>
		</div>
		<!-- <div class="card">
			<div class="shop-item">
				<div class="flex">
					<span style="margin-right:6px;">{{ storelist.storeName }}</span>
					<van-tag type="primary">{{ storelist.deviceCount }}</van-tag>
				</div>
				<span>¥ {{ storelist.income }}</span>
			</div>
			<div class="condition">
				<van-field v-model="params.startTime" readonly name="datePicker" placeholder="请选择开始时间"
					@click="timekai('startTime')" style="width:40% ;" input-align="center" />
				<van-field v-model="params.endTime" readonly name="datePicker" placeholder="请选择结束时间"
					@click="timekai('endTime')" style="width:40% ;" input-align="center" />
			</div>
		</div> -->
	</van-sticky>
    <div style="padding: 0 10px;">
		<div class="card">
			<h3 class="TotalRevenue">{{ storelist.storeName }}</h3>
			<div class="total-revenue">¥ {{ totalAmount }}</div>
		</div>
		<div class="card" style="padding-bottom: 5px;">
			<h3 class="TotalRevenue">设备收益</h3>
			<div>
				<div class="shop-item" v-for="(item,index) in list" :key="index" @click="godevice(item)">
					<div class="flex">
						<span style="margin-right:6px;">{{ item.deviceNumber }}</span>
					</div>
					<span style="color: #2d8cf0;font-weight: 700;">¥ {{ item.income }}</span>
				</div>
			</div>
		</div>
	</div>
	<!-- <div class="contentt">
		<div class="grid-content" v-for="(item, index) in list" :key="index" @click="godevice(item)">
			<div class="grid-content-top-dec">
				<div class="grid-content-top-dec-p">
					<span class="grid-content-top-dec-span">编号:{{ item.deviceNumber }}</span>
					<span class="grid-content-top-dec-span">收益:{{ item.income }}</span>
				</div>
			</div>
		</div>
	</div> -->
	<!-- 时间选择 -->
	<van-popup v-model:show="showPicker" destroy-on-close position="bottom" safe-area-inset-bottom round>
		<van-date-picker v-model="currentDate" @confirm="onConfirm" @cancel="showPicker = false" />
	</van-popup>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from "vue";
	import {
		useRoute,
        useRouter
	} from 'vue-router';
	import {
		incomeInfo_device
	} from '@/api/deviceStores';
	const route = useRoute(); // 路由
	const router = useRouter(); // 路由
    const placeholder = ('请输入设备号搜索');

	const data = JSON.parse(route.params.values);
	const params = ref({
		storesId: data.storesId,
		startTime: data.startTime,
		endTime: data.endTime,
		deviceNumber: ''
	});
  let totalAmount =0;
  const list = ref([]); // 数据列表
	const storelist = data.item; // 店铺列表

	onMounted(() => {
		getParams(); // 获取参数
	});


	// 获取参数
	const getParams = async () => {
		try {
			const response = await incomeInfo_device(params.value);
      totalAmount=response.data.totalAmount;
			list.value = response.data.list || [];
		} catch (err) {
			console.error('获取数据失败', err);
		}
	};

	const mark = ref('');
	const showPicker = ref(false);
	const currentDate = ref([
		new Date().getFullYear().toString(),
		(new Date().getMonth() + 1).toString().padStart(2, '0'),
		new Date().getDate().toString().padStart(2, '0')
	]);


	// 时间选择
	const timekai = (type) => {
		mark.value = type;
		showPicker.value = true;
	};

	const onConfirm = ({
		selectedValues,
		selectedOptions
	}) => {
		currentDate.value = selectedValues;
		showPicker.value = false;
		// 身份证有效期
		if (mark.value === 'startTime') {
			params.value.startTime = selectedValues.join('-');
		} else {
			params.value.endTime = selectedValues.join('-');
		}
		list.value = [];
		getParams();
	}
    const handleSearch = () => {
		list.value = [];
		getParams();
	};
	const godevice = (item) =>{
        var data = {
			keyword: item.deviceNumber,
			startTime: params.value.startTime,
			endTime: params.value.endTime,
			item: item
		}
		router.push({
			name: 'incomeInfoDevice',
			params: {
				values: JSON.stringify(data)
			}
		})
	};

	// 返回
	const onClickLeft = () => history.back();
</script>

<style scoped lang="scss">


	.flex {
		display: flex;
		align-items: center;
		align-content: center;
	}

	.condition {
		display: flex;
		align-items: center;
		align-content: center;
		justify-content: space-around;
		gap: 10px;
		// padding: 0 10px;
		box-sizing: border-box;

		.conditionLi {
			padding: 6px;
			border-radius: 8px;
			border: 1px solid #ddd;
			font-size: 12px;
			background-color: #FFF;
		}
	}

    :deep(.searchBox) {
		background-color: white;

		.van-search {
			background-color: white;

			// 搜索框
			.van-search__content {
				background-color: white;
				border: 1px solid #cccccc;
				// border-radius: 5px;
				background-color: #f5f5f5;
			}
		}

		.van-search__action {
			color: #fff;
			background-color: #2FBC3C;
			border-radius: 16px;
			width: 40px;
			text-align: center;
			margin: 0 10px;
		}

		// 文字
		.search-confirm {
			display: flex;
			align-items: center;
			height: 100%;
			padding: 0 12px;

			.search-text {
				color: rgb(81, 164, 208);
				/* 蓝色搜索文字 */
				font-size: 14px;
				font-weight: 500;
				white-space: nowrap;
				cursor: pointer;
			}
		}
	}

    .card {
		background: white;
		border-radius: 12px;
		padding: 15px;
		margin-top: 15px;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
	}

    .TotalRevenue {
		margin: 12px 0;
	}

    .total-revenue {
		font-size: 24px;
		color: #2d8cf0;
		font-weight: bold;
	}

    .shop-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		align-content: center;
		flex-wrap: wrap;
		padding: 10px 0;
		border-bottom: 1px solid #eee;
		cursor: pointer;

		// margin-bottom: 10px;

		&:last-child {
			border-bottom: none;
		}
	}

    :deep(.van-field__control:read-only){
    	cursor: pointer;
	}
</style>
